<template>
  <div class="app-container">
    <div class="OrderSummaryContainer">
      <div class="search">
        <img class="searchImg" src="./image/search.png" alt="" />
        <span class="searchText">筛选查询</span>
      </div>

      <!-- 查询表单 -->
      <div class="form">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item>
            <el-input style="width: 180px; height: 32px" size="large" placeholder="请输入指令" />
          </el-form-item>

          <el-form-item>
            <el-select v-model="season" filterable placeholder="工厂型体" class="inputBase">
              <el-option v-for="item in seasons" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-select v-model="type" filterable placeholder="新旧型体" class="inputBase">
              <el-option v-for="item in types" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-select v-model="season" filterable placeholder="颜色代码" class="inputBase">
              <el-option v-for="item in seasons" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-select v-model="brand" filterable placeholder="颜色名称" class="inputBase">
              <el-option v-for="item in brands" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-select v-model="brand" filterable placeholder="品牌" class="inputBase">
              <el-option v-for="item in brands" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>

          <el-form-item label="下单日期">
            <el-date-picker
              style="width: 248px"
              v-model="deliveryTime"
              type="daterange"
              range-separator="-"
              start-placeholder="2023-06-07"
              end-placeholder="2023-06-07"
            />
          </el-form-item>

          <el-form-item label="客人交期">
            <el-date-picker
              style="width: 245px"
              v-model="OrderDate"
              type="daterange"
              range-separator="-"
              start-placeholder="2023-06-07"
              end-placeholder="2023-06-07"
            />
          </el-form-item>
        </el-form>
      </div>

      <!-- 查询单选框 -->
      <div class="checkbox">
        <div class="checkboxDiv">
          <el-form-item>
            <el-input style="width: 180px; height: 32px" size="large" placeholder="请输入合同号" />
          </el-form-item>

          <el-form-item>
            <el-input style="width: 180px; height: 32px" size="large" class="checkboxinputBase" placeholder="请输入客人货号" />
          </el-form-item>

          <el-form-item>
            <el-select v-model="brand" filterable placeholder="冲刀" class="checkboxinputBase">
              <el-option v-for="item in brands" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-select v-model="brand" filterable placeholder="楦头" class="checkboxinputBase">
              <el-option v-for="item in brands" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-select v-model="brand" filterable placeholder="低模" class="checkboxinputBase">
              <el-option v-for="item in brands" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-select v-model="brand" filterable placeholder="大底厂商" class="checkboxinputBase">
              <el-option v-for="item in brands" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-select v-model="brand" filterable placeholder="季度" class="checkboxinputBase">
              <el-option v-for="item in brands" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
        </div>
        <div class="checkboxDivTwo">
          <el-button type="primary" size="small" @click="">查询</el-button>
          <el-button type="primary" size="small" @click="">'置空'</el-button>
          <el-button type="primary" size="small" @click="">导出</el-button>
        </div>
      </div>

      <!-- 数据列表 -->
      <div class="Main">
        <!-- 左侧 -->
        <div class="MainLeft">
          <el-card shadow="never" :body-style="{ padding: '12px 20px 80px' }">
            <div slot="header">
              <h1 class="MainLeftCardH1">指令明细</h1>
            </div>
            <Table :tableData="tableData" :tableHeader="tableHeader" :selection="true" :TableHeight="600" />

            <!-- card body -->
          </el-card>
        </div>

        <!-- 右侧 -->
        <div class="MainRight">
          <el-card class="MainLeftCard" shadow="always" :body-style="{ padding: '12px 20px 80px' }">
            <div class="MainRightHeader" slot="header">
              <h1 class="MainLeftCardH1">指令信息</h1>
              <div class="MainLeftCardDiv">
                <div class="MainRightH1eaderOne">
                  <div class="MainRightH1eaderOneD">
                    <!-- 工厂型体 -->
                    <el-form-item label="工厂型体" style="font-size: 9px; height: 15px">
                      <el-input class="MainRightMainPoInput" />
                    </el-form-item>

                    <!-- 品牌 -->
                    <el-form-item style="margin-left: 23px; font-size: 9px; height: 15px" label="品牌">
                      <el-input placeholder=" " class="MainRightMainPoInput" />
                    </el-form-item>

                    <!-- 冲刀号 -->
                    <el-form-item style="margin-left: 12px; font-size: 9px; height: 15px" label="冲刀号">
                      <el-input placeholder=" " class="MainRightMainPoInput" />
                    </el-form-item>

                    <!-- 生成日期 -->
                    <el-form-item label="生成日期" style="font-size: 9px; height: 15px">
                      <el-input class="MainRightMainPoInput" />
                    </el-form-item>
                  </div>

                  <div class="MainRightH1eaderOneD">
                    <!-- 新旧型体 -->
                    <el-form-item label="新旧型体" style="font-size: 9px; height: 15px">
                      <el-input style="width: 88px; height: 25px" />
                    </el-form-item>

                    <!-- 客人货号 -->
                    <el-form-item label="客人货号" style="font-size: 9px; height: 15px">
                      <el-input style="width: 88px; height: 25px" />
                    </el-form-item>

                    <!-- 底摸号 -->
                    <el-form-item style="margin-left: 12px; font-size: 9px; height: 15px" label="底摸号">
                      <el-input placeholder=" " style="width: 88px; height: 25px" />
                    </el-form-item>

                    <!-- 生成状态 -->
                    <el-form-item label="生成状态" style="font-size: 9px; height: 15px">
                      <el-input style="width: 88px; height: 25px" />
                    </el-form-item>
                  </div>

                  <div class="MainRightH1eaderOneD">
                    <!-- 颜色代码 -->
                    <el-form-item label="颜色代码" style="font-size: 9px; height: 15px">
                      <el-input class="MainRightMainPoInput" />
                    </el-form-item>

                    <!-- 合同号 -->
                    <el-form-item style="margin-left: 12px; font-size: 9px; height: 15px" label="合同号">
                      <el-input placeholder=" " class="MainRightMainPoInput" />
                    </el-form-item>

                    <!-- 大底厂商 -->
                    <el-form-item label="大底厂商" style="font-size: 9px; height: 15px">
                      <el-input class="MainRightMainPoInput" />
                    </el-form-item>

                    <!-- 检核日期 -->
                    <el-form-item label="检核日期" style="font-size: 9px; height: 15px">
                      <el-input class="MainRightMainPoInput" />
                    </el-form-item>
                  </div>
                </div>

                <div class="MainRightHeaderTwo">
                  <div class="MainRightH1eaderOneD">
                    <!-- 颜色 -->
                    <el-form-item style="margin-left: 23px; font-size: 9px; height: 15px" label="颜色">
                      <el-input placeholder=" " class="MainRightMainPoInput" />
                    </el-form-item>

                    <!-- 客人交期 -->
                    <el-form-item label="客人交期" style="font-size: 9px; height: 15px">
                      <el-input class="MainRightMainPoInput" />
                    </el-form-item>

                    <!-- 楦头 -->
                    <el-form-item style="margin-left: 23px; font-size: 9px; height: 15px" label="楦头">
                      <el-input placeholder=" " class="MainRightMainPoInput" />
                    </el-form-item>

                    <!-- 检核状态 -->
                    <el-form-item label="检核状态" style="font-size: 9px; height: 15px">
                      <el-input class="MainRightMainPoInput" />
                    </el-form-item>
                  </div>

                  <div class="MainRightH1eaderOneD">
                    <!-- 制单人 -->
                    <el-form-item style="margin-left: 12px; font-size: 9px; height: 15px" label="制单人">
                      <el-input placeholder=" " class="MainRightMainPoInput" />
                    </el-form-item>

                    <!-- 制单日期 -->
                    <el-form-item label="制单日期" style="font-size: 9px; height: 15px">
                      <el-input class="MainRightMainPoInput" />
                    </el-form-item>

                    <!-- 下单日期 -->
                    <el-form-item label="下单日期" style="font-size: 9px; height: 15px">
                      <el-input class="MainRightMainPoInput" />
                    </el-form-item>

                    <!-- 审核日期 -->
                    <el-form-item label="审核日期" style="font-size: 9px; height: 15px">
                      <el-input class="MainRightMainPoInput" />
                    </el-form-item>
                  </div>

                  <div class="MainRightH1eaderOneD">
                    <!-- 中间码 -->
                    <el-form-item style="margin-left: 12px; font-size: 9px; height: 15px" label="中间码">
                      <el-input placeholder=" " class="MainRightMainPoInput" />
                    </el-form-item>

                    <!-- 基本码 -->
                    <el-form-item style="margin-left: 12px; font-size: 9px; height: 15px" label="基本码">
                      <el-input placeholder=" " class="MainRightMainPoInput" />
                    </el-form-item>

                    <!-- 季度 -->
                    <el-form-item style="margin-left: 23px; font-size: 9px; height: 15px" label="季度">
                      <el-input placeholder=" " class="MainRightMainPoInput" />
                    </el-form-item>

                    <!-- 备注 -->
                    <el-form-item style="margin-left: 23px; font-size: 9px; height: 15px" label="备注">
                      <el-input placeholder=" " class="MainRightMainPoInput" />
                    </el-form-item>
                  </div>
                </div>

                <div class="MainRightHeaderThree">
                  <div class="MainRightHeaderThreeDiv">
                    <!-- 全套 -->
                    <el-form-item>
                      <el-checkbox style="height: 20px !important" label="全套" size="default" />
                    </el-form-item>

                    <!-- 工艺 -->
                    <el-form-item class="checkoutAll">
                      <el-checkbox style="height: 20px !important" label="工艺" size="default" />
                    </el-form-item>

                    <!-- 大底 -->
                    <el-form-item class="checkoutAll">
                      <el-checkbox style="height: 20px !important" label="大底" size="default" />
                    </el-form-item>
                  </div>

                  <div class="MainRightHeaderThreeDiv">
                    <!-- 主面料 -->
                    <el-form-item>
                      <el-checkbox style="height: 20px !important" label="主面料" size="default" />
                    </el-form-item>

                    <!-- 配套 -->
                    <el-form-item class="checkoutAll">
                      <el-checkbox style="height: 20px !important" label="配套" size="default" />
                    </el-form-item>

                    <!-- 成型 -->
                    <el-form-item class="checkoutAll">
                      <el-checkbox style="height: 20px !important" label="成型" size="default" />
                    </el-form-item>
                  </div>

                  <div class="MainRightHeaderThreeDiv">
                    <!-- 冲裁 -->
                    <el-form-item>
                      <el-checkbox style="height: 20px !important" label="冲裁" size="default" />
                    </el-form-item>

                    <!-- 针车 -->
                    <el-form-item class="checkoutAll">
                      <el-checkbox style="height: 20px !important" label="针车" size="default" />
                    </el-form-item>

                    <!-- 外发 -->
                    <el-form-item class="checkoutAll">
                      <el-checkbox style="height: 20px !important" label="外发" size="default" />
                    </el-form-item>
                  </div>
                </div>
              </div>
            </div>

            <div class="MainRightMain" slot="header">
              <div class="MainRightMainPo">
                <el-form-item>
                  <el-select v-model="season" filterable placeholder="PO号码明细" class="MainRightMainPoselect">
                    <el-option v-for="item in seasons" :key="item.value" :label="item.label" :value="item.value" />
                  </el-select>
                </el-form-item>

                <el-form-item class="MainRightMainPoItem" label="码制">
                  <el-select v-model="season" filterable placeholder="欧码">
                    <el-option v-for="item in seasons" :key="item.value" :label="item.label" :value="item.value" />
                  </el-select>
                </el-form-item>

                <el-form-item class="MainRightMainPoItem" label="总数量">
                  <el-input placeholder=" " class="MainRightMainPoInput" />
                </el-form-item>

                <el-form-item class="MainRightMainPoItem" label="测试样">
                  <el-input placeholder=" " class="MainRightMainPoInput" />
                </el-form-item>

                <el-form-item class="MainRightMainPoItem" label="拉力样">
                  <el-input placeholder=" " class="MainRightMainPoInput" />
                </el-form-item>

                <el-form-item class="MainRightMainPoItem" label="船头样">
                  <el-input placeholder=" " class="MainRightMainPoInput" />
                </el-form-item>
              </div>

              <div>
                <Table :tableData="tableData" :tableHeader="tableHeader3" :selection="false" :TableHeight="130" />
              </div>
            </div>

            <div class="MainRightBottom" slot="header">
              <h1 class="MainLeftCardH1">指令配码明细</h1>
              <Table :tableData="tableData" :tableHeader="tableHeader4" :selection="false" :TableHeight="180" />
              <div style="float: right">
                <el-button style="background-color: #e7e7e7; width: 60px; color: #000000; border: none" type="info" size="small">保存</el-button>
                <el-button style="background-color: #f89027; width: 60px" type="warning" size="small">打印</el-button>
              </div>
            </div>
            <!-- card body -->
          </el-card>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import { reactive, ref } from 'vue'
import 'dayjs/locale/zh-cn'
import JMessage from '@/utils/JMessage'
export default defineComponent({
  name: 'CommandDataQueryKl'
})
</script>
<script lang="ts" setup>
import { i18n, Jzhcn } from '@/i18n'
const formInline = reactive({
  user: '',
  region: ''
})
const type = ref('')
const types = [
  {
    value: 'Option1',
    label: 'Option1'
  },
  {
    value: 'Option2',
    label: 'Option2'
  },
  {
    value: 'Option3',
    label: 'Option3'
  },
  {
    value: 'Option4',
    label: 'Option4'
  },
  {
    value: 'Option5',
    label: 'Option5'
  }
]

const brand = ref('')
const brands = [
  {
    value: 'Option1',
    label: 'Option1'
  },
  {
    value: 'Option2',
    label: 'Option2'
  },
  {
    value: 'Option3',
    label: 'Option3'
  },
  {
    value: 'Option4',
    label: 'Option4'
  },
  {
    value: 'Option5',
    label: 'Option5'
  }
]

const season = ref('')
const seasons = [
  {
    value: 'Option1',
    label: 'Option1'
  },
  {
    value: 'Option2',
    label: 'Option2'
  },
  {
    value: 'Option3',
    label: 'Option3'
  },
  {
    value: 'Option4',
    label: 'Option4'
  },
  {
    value: 'Option5',
    label: 'Option5'
  }
]

const deliveryTime = ref('')
const OrderDate = ref('')
const shippingDate = ref('')
// 表格数据
const tableData = ref([
  {
    customer: '2023-5-5002',
    instruction: 'CKJM046-22L',
    shape: '长裤',
    color: '黑色',
    orderNum: '1',
    orderDate: '2021-05-20',
    deliveryDate: '2021-05-20',
    process: '1',
    arbitration: '1',
    manual: '1',
    needleCar: '1',
    unitPrice: '1',
    externalUnitPrice: '1'
  },
  {
    customer: '2023-5-5002',
    instruction: 'CKJM046-22L',
    shape: '长裤',
    color: '黑色',
    orderNum: '1',
    orderDate: '2021-05-20',
    deliveryDate: '2021-05-20',
    process: '1',
    arbitration: '1',
    manual: '1',
    needleCar: '1',
    unitPrice: '1',
    externalUnitPrice: '1'
  },
  {
    customer: '2023-5-5002',
    instruction: 'CKJM046-22L',
    shape: '长裤',
    color: '黑色',
    orderNum: '1',
    orderDate: '2021-05-20',
    deliveryDate: '2021-05-20',
    process: '1',
    arbitration: '1',
    manual: '1',
    needleCar: '1',
    unitPrice: '1',
    externalUnitPrice: '1'
  },
  {
    customer: '2023-5-5002',
    instruction: 'CKJM046-22L',
    shape: '长裤',
    color: '黑色',
    orderNum: '1',
    orderDate: '2021-05-20',
    deliveryDate: '2021-05-20',
    process: '1',
    arbitration: '1',
    manual: '1',
    needleCar: '1',
    unitPrice: '1',
    externalUnitPrice: '1'
  },
  {
    customer: '2023-5-5002',
    instruction: 'CKJM046-22L',
    shape: '长裤',
    color: '黑色',
    orderNum: '1',
    orderDate: '2021-05-20',
    deliveryDate: '2021-05-20',
    process: '1',
    arbitration: '1',
    manual: '1',
    needleCar: '1',
    unitPrice: '1',
    externalUnitPrice: '1'
  },
  {
    customer: '2023-5-5002',
    instruction: 'CKJM046-22L',
    shape: '长裤',
    color: '黑色',
    orderNum: '1',
    orderDate: '2021-05-20',
    deliveryDate: '2021-05-20',
    process: '1',
    arbitration: '1',
    manual: '1',
    needleCar: '1',
    unitPrice: '1',
    externalUnitPrice: '1'
  },
  {
    customer: '2023-5-5002',
    instruction: 'CKJM046-22L',
    shape: '长裤',
    color: '黑色',
    orderNum: '1',
    orderDate: '2021-05-20',
    deliveryDate: '2021-05-20',
    process: '1',
    arbitration: '1',
    manual: '1',
    needleCar: '1',
    unitPrice: '1',
    externalUnitPrice: '1'
  },
  {
    customer: '2023-5-5002',
    instruction: 'CKJM046-22L',
    shape: '长裤',
    color: '黑色',
    orderNum: '1',
    orderDate: '2021-05-20',
    deliveryDate: '2021-05-20',
    process: '1',
    arbitration: '1',
    manual: '1',
    needleCar: '1',
    unitPrice: '1',
    externalUnitPrice: '1'
  },
  {
    customer: '2023-5-5002',
    instruction: 'CKJM046-22L',
    shape: '长裤',
    color: '黑色',
    orderNum: '1',
    orderDate: '2021-05-20',
    deliveryDate: '2021-05-20',
    process: '1',
    arbitration: '1',
    manual: '1',
    needleCar: '1',
    unitPrice: '1',
    externalUnitPrice: '1'
  },
  {
    customer: '2023-5-5002',
    instruction: 'CKJM046-22L',
    shape: '长裤',
    color: '黑色',
    orderNum: '1',
    orderDate: '2021-05-20',
    deliveryDate: '2021-05-20',
    process: '1',
    arbitration: '1',
    manual: '1',
    needleCar: '1',
    unitPrice: '1',
    externalUnitPrice: '1'
  },
  {
    customer: '2023-5-5002',
    instruction: 'CKJM046-22L',
    shape: '长裤',
    color: '黑色',
    orderNum: '1',
    orderDate: '2021-05-20',
    deliveryDate: '2021-05-20',
    process: '1',
    arbitration: '1',
    manual: '1',
    needleCar: '1',
    unitPrice: '1',
    externalUnitPrice: '1'
  },
  {
    customer: '2023-5-5002',
    instruction: 'CKJM046-22L',
    shape: '长裤',
    color: '黑色',
    orderNum: '1',
    orderDate: '2021-05-20',
    deliveryDate: '2021-05-20',
    process: '1',
    arbitration: '1',
    manual: '1',
    needleCar: '1',
    unitPrice: '1',
    externalUnitPrice: '1'
  },
  {
    customer: '2023-5-5002',
    instruction: 'CKJM046-22L',
    shape: '长裤',
    color: '黑色',
    orderNum: '1',
    orderDate: '2021-05-20',
    deliveryDate: '2021-05-20',
    process: '1',
    arbitration: '1',
    manual: '1',
    needleCar: '1',
    unitPrice: '1',
    externalUnitPrice: '1'
  },
  {
    customer: '2023-5-5002',
    instruction: 'CKJM046-22L',
    shape: '长裤',
    color: '黑色',
    orderNum: '1',
    orderDate: '2021-05-20',
    deliveryDate: '2021-05-20',
    process: '1',
    arbitration: '1',
    manual: '1',
    needleCar: '1',
    unitPrice: '1',
    externalUnitPrice: '1'
  },
  {
    customer: '2023-5-5002',
    instruction: 'CKJM046-22L',
    shape: '长裤',
    color: '黑色',
    orderNum: '1',
    orderDate: '2021-05-20',
    deliveryDate: '2021-05-20',
    process: '1',
    arbitration: '1',
    manual: '1',
    needleCar: '1',
    unitPrice: '1',
    externalUnitPrice: '1'
  },
  {
    customer: '2023-5-5002',
    instruction: 'CKJM046-22L',
    shape: '长裤',
    color: '黑色',
    orderNum: '1',
    orderDate: '2021-05-20',
    deliveryDate: '2021-05-20',
    process: '1',
    arbitration: '1',
    manual: '1',
    needleCar: '1',
    unitPrice: '1',
    externalUnitPrice: '1'
  },
  {
    customer: '2023-5-5002',
    instruction: 'CKJM046-22L',
    shape: '长裤',
    color: '黑色',
    orderNum: '1',
    orderDate: '2021-05-20',
    deliveryDate: '2021-05-20',
    process: '1',
    arbitration: '1',
    manual: '1',
    needleCar: '1',
    unitPrice: '1',
    externalUnitPrice: '1'
  },
  {
    customer: '2023-5-5002',
    instruction: 'CKJM046-22L',
    shape: '长裤',
    color: '黑色',
    orderNum: '1',
    orderDate: '2021-05-20',
    deliveryDate: '2021-05-20',
    process: '1',
    arbitration: '1',
    manual: '1',
    needleCar: '1',
    unitPrice: '1',
    externalUnitPrice: '1'
  },
  {
    customer: '2023-5-5002',
    instruction: 'CKJM046-22L',
    shape: '长裤',
    color: '黑色',
    orderNum: '1',
    orderDate: '2021-05-20',
    deliveryDate: '2021-05-20',
    process: '1',
    arbitration: '1',
    manual: '1',
    needleCar: '1',
    unitPrice: '1',
    externalUnitPrice: '1'
  },
  {
    customer: '2023-5-5002',
    instruction: 'CKJM046-22L',
    shape: '长裤',
    color: '黑色',
    orderNum: '1',
    orderDate: '2021-05-20',
    deliveryDate: '2021-05-20',
    process: '1',
    arbitration: '1',
    manual: '1',
    needleCar: '1',
    unitPrice: '1',
    externalUnitPrice: '1'
  },
  {
    customer: '2023-5-5002',
    instruction: 'CKJM046-22L',
    shape: '长裤',
    color: '黑色',
    orderNum: '1',
    orderDate: '2021-05-20',
    deliveryDate: '2021-05-20',
    process: '1',
    arbitration: '1',
    manual: '1',
    needleCar: '1',
    unitPrice: '1',
    externalUnitPrice: '1'
  },
  {
    customer: '2023-5-5002',
    instruction: 'CKJM046-22L',
    shape: '长裤',
    color: '黑色',
    orderNum: '1',
    orderDate: '2021-05-20',
    deliveryDate: '2021-05-20',
    process: '1',
    arbitration: '1',
    manual: '1',
    needleCar: '1',
    unitPrice: '1',
    externalUnitPrice: '1'
  },
  {
    customer: '2023-5-5002',
    instruction: 'CKJM046-22L',
    shape: '长裤',
    color: '黑色',
    orderNum: '1',
    orderDate: '2021-05-20',
    deliveryDate: '2021-05-20',
    process: '1',
    arbitration: '1',
    manual: '1',
    needleCar: '1',
    unitPrice: '1',
    externalUnitPrice: '1'
  }
])

const tableHeader = ref([
  {
    label: '指令',
    prop: 'customer',
    width: '67px'
  },
  {
    label: '订单数',
    prop: 'instruction',
    width: '67px'
  },
  {
    label: '预补数',
    prop: 'shape',
    width: '67px'
  }
])

const tableHeader3 = ref([
  {
    label: '配码',
    prop: 'customer',
    width: '55px'
  },
  {
    label: 'PO',
    prop: 'instruction',
    width: '55px'
  },
  {
    label: '装箱方式',
    prop: 'shape',
    width: '75px'
  },
  {
    label: '数量',
    prop: 'shape',
    width: '55px'
  },
  {
    label: '27.5#',
    prop: 'shape',
    width: '55px'
  },
  {
    label: '28#',
    prop: 'shape',
    width: '55px'
  },
  {
    label: '28.5#',
    prop: 'shape',
    width: '55px'
  },
  {
    label: '29#',
    prop: 'shape',
    width: '55px'
  },
  {
    label: '29.5#',
    prop: 'shape',
    width: '55px'
  },
  {
    label: '30#',
    prop: 'shape',
    width: '55px'
  },
  {
    label: '30.5#',
    prop: 'shape',
    width: '55px'
  },
  {
    label: '31#',
    prop: 'shape',
    width: '55px'
  },
  {
    label: '31.5#',
    prop: 'shape',
    width: '55px'
  },
  {
    label: '32#',
    prop: 'shape',
    width: '55px'
  },
  {
    label: '32.5#',
    prop: 'shape',
    width: '55px'
  },
  {
    label: '33#',
    prop: 'shape',
    width: '55px'
  },
  {
    label: '33.5#',
    prop: 'shape',
    width: '55px'
  },
  {
    label: '34#',
    prop: 'shape',
    width: '55px'
  },
  {
    label: '34.5#',
    prop: 'shape',
    width: '55px'
  },
  {
    label: '35#',
    prop: 'shape',
    width: '55px'
  },
  {
    label: '35.5#',
    prop: 'shape',
    width: '55px'
  },
  {
    label: '36#',
    prop: 'shape',
    width: '55px'
  },
  {
    label: '36.5#',
    prop: 'shape',
    width: '55px'
  },
  {
    label: '37#',
    prop: 'shape',
    width: '55px'
  },
  {
    label: '37.5#',
    prop: 'shape',
    width: '55px'
  },
  {
    label: '38#',
    prop: 'shape',
    width: '55px'
  },
  {
    label: '38.5#',
    prop: 'shape',
    width: '55px'
  },
  {
    label: '39#',
    prop: 'shape',
    width: '55px'
  },
  {
    label: '39.5#',
    prop: 'shape',
    width: '55px'
  },
  {
    label: '40#',
    prop: 'shape',
    width: '55px'
  },
  {
    label: '40.5#',
    prop: 'shape',
    width: '55px'
  },
  {
    label: '41#',
    prop: 'shape',
    width: '55px'
  },
  {
    label: '41.5#',
    prop: 'shape',
    width: '55px'
  },
  {
    label: '42#',
    prop: 'shape',
    width: '55px'
  },
  {
    label: '42.5#',
    prop: 'shape',
    width: '55px'
  },
  {
    label: '43#',
    prop: 'shape',
    width: '55px'
  }
])

const tableHeader4 = ref([
  {
    label: '号码',
    prop: 'shape',
    width: '139px'
  },
  {
    label: '订单数',
    prop: 'shape',
    width: '79px'
  },
  {
    label: '预补数',
    prop: 'shape',
    width: '79px'
  }
])

const checked1 = ref(true)
const checked2 = ref(false)
const checked3 = ref(false)

// 分页器
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(658)
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
}
</script>

<style lang="less" scoped>
// 筛选查询行
.search {
  height: 20px;
  line-height: 20px;
  display: flex;
  align-items: center;

  .searchImg {
    width: 20px;
    height: 20px;
  }

  .searchText {
    font-size: 14px;
    font-family: PingFangSC-Medium-, PingFangSC-Medium;
    color: #666666;
    margin-left: 8px;
  }
}

// 日期右侧菜单
:deep(.el-range__icon) {
  position: absolute;
  right: 1px;
  color: #f89027 !important;
}

:deep(.el-range__close-icon) {
  position: absolute;
  left: 5px;
}

// 头部
.form {
  margin-top: 10px;
  width: 100%;
  margin-left: -7px;
}

.inputBase {
  width: 128px;
  height: 32px;
  margin-left: 30px;
}

// 按钮
.checkboxDiv {
  display: flex;
}

.checkbox {
  display: flex;

  .checkboxDivTwo {
    margin-top: 5px;
    margin-left: 15px;
  }
}

.checkboxinputBase {
  width: 128px;
  margin-left: 40px;
}

:deep(.el-form--inline .el-form-item) {
  color: red;
  margin-right: 0 !important;
  margin-left: 7px;
}

// 主体
.Main {
  width: 100%;
  height: 660px;
  display: flex;

  .MainLeft {
    width: 20%;
    height: 100%;
  }

  .MainRight {
    width: 88%;
    height: 100%;
    margin-left: 35px;
  }
}

// 主体左侧卡片
.MainLeftCard {
  width: 92%;
  height: 100%;
  box-shadow: none;
}

.MainLeftCardH1 {
  font-size: 16px;
}

// 主体右侧部分
.MainRightHeader {
  width: 100%;
  height: 170px;
}

.MainRightMain {
  width: 100%;
  height: 210px;
  margin-top: 15px;

  .MainRightMainPo {
    width: 100%;
    height: 30%;
    display: flex;

    .MainRightMainPoselect {
      width: 320px;
      margin-top: -7px;
    }
  }
}

.MainRightBottom {
  width: 100%;
  height: 218px;
}

// 指令信息
.MainRightH1eaderOne {
  width: 34%;
  height: 90%;
  display: flex;
  margin-top: 20px;
}

.MainRightHeaderTwo {
  width: 34%;
  height: 90%;
  display: flex;
  margin-top: 20px;
  margin-left: 15px;
}

.MainRightHeaderThree {
  width: 32%;
  height: 90%;
  margin-top: 20px;
  margin-left: 15px;
  display: flex;
}

.MainLeftCardDiv {
  display: flex;
  height: 100%;
  width: 100%;
}

.MainRightH1eaderOneD {
  width: 33%;
  height: 100%;
  margin-left: 10px;
}

.MainRightHeaderThreeDiv {
  display: flex;
  height: 100%;
  width: 100%;
  flex-direction: column;
}

.checkoutAll {
  margin-top: 13px;
}

.MainRightMainPoInput {
  width: 88px;
  height: 25px;
}

.MainRightMainPoItem {
  display: flex;
  align-items: center;
  margin-left: 12px;
  font-size: 9px;
  height: 15px;
  margin-top: 10px;
}
</style>
